<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body style="width: 600px; height: 600px;">
<div id="div1" style="width: 100px; height: 100px; left: 50px; top:50px; background: red;  position: absolute"></div>
<div id="div2" style="width: 100px; height: 100px; left: 50px; top:200px; background: blue; position: absolute"></div>
<div id="div3" style="width: 100px; height: 100px; left: 200px; top:50px; background: red;  position: absolute"></div>
<div id="div4" style="width: 100px; height: 100px; left: 200px; top:200px; background: blue; position: absolute"></div>
<script>
    {
        window.eventStorage = [];

        const div1 = document.getElementById('div1');
        const div2 = document.getElementById('div2');
        const div3 = document.getElementById('div3');
        const div4 = document.getElementById('div4');

        let isSecondEvent = false;

        const swapElements = function (el1, el2) {
            const top1  = el1.style.top;
            const left1 = el1.style.left;
            const top2  = el2.style.top;
            const left2 = el2.style.left;

            el1.style.top  = top2;
            el1.style.left = left2;
            el2.style.top  = top1;
            el2.style.left = left1;
        };

        const shiftElement = function (el) {
            const top = parseInt(el.style.top, 10);

            el.style.top = top + 100 + 'px';
        };

        const saveEventToStorage = function (e) {
            window.eventStorage.push(e.target.tagName.toLowerCase() + ' ' + e.type);
        };

        document.addEventListener('click', saveEventToStorage);
        document.addEventListener('dblclick', saveEventToStorage);

        // raising click for common parent

        div1.addEventListener('mousedown', function () {
            swapElements(div1, div2);
        });

        // raising click for top element

        div2.addEventListener('mousedown', function () {
            shiftElement(div2);
        });

        // raising dblclick for common element

        div3.addEventListener('mousedown', function () {
            if (!isSecondEvent)
                isSecondEvent = true;
            else
                swapElements(div3, div4);
        });

        // raising dblclick for a top element

        div4.addEventListener('mousedown', function () {
            if (!isSecondEvent)
                isSecondEvent = true;
            else
                shiftElement(div4);
        });
    }
</script>
</body>
</html>
